/*
 * @Author: Yejing
 * @Date: 2023-06-25 14:33:15
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-27 14:51:33
 * @Description: desc
 */
<template>
	<view class="shops-card-container" @click="goShopInfo">
		<u-image width="100%" height="350rpx" :src="$u.file.getMedieUrl(details.shopAvatarUrl)"></u-image>
		<view class="info">
			<p class="name">{{details.shopName}}</p>
			<p class="num">
				<text v-if="details.shopProductNum">{{details.shopProductNum}}</text>
				<text v-else>0</text>
				{{ ' ' }}
				Product</p>
		</view>
	</view>
</template>

<script>
	export default {
		name: "shopsCard",
		props: {
			details: {
				default: () => ({}),
				type: Object
			}
		},
		data() {
			return {

			};
		},
		methods:{
			goShopInfo(){
				console.log(this.details);
				this.$u.route('/pages/shop/index',{
				    shopId:this.details.id,
					})
				//浏览店铺
				this.$u.post(`/app/shop/browseShop/${this.details.id}`).then((res) => {
					
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shops-card-container {
		-webkit-column-break-inside: avoid;
		position: relative;

		/deep/uni-image {
			border-radius: 30rpx !important;
		}

		.info {
			position: absolute;
			bottom: 0;
			background: rgba(255, 255, 255, 0.8);
			width: 100%;
			border-radius: 30rpx;
			width: 100%;
			height: 103rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-end;
			padding-bottom: 15rpx;


			.name {
				width: 100%;
				color: #989AA6;
				margin-top: 5rpx;
				font-size: 30rpx;
				text-align: center;
				color: #1B1D29;
				line-height: 19px;
				margin-bottom: 6px;
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: normal;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}

			.num {
				width: 100%;
				color: #3E2F25;
				font-size: 34rpx;
				text-align: center;
				color: #000000;
				font-size: 22rpx;

			}
		}
	}
</style>
